<template>
	<div class="form-container">
		<h1>邮箱注册</h1>
		<section>
			<div class="form-main">
				<div class="form">
					<div class="message">
						<ul>
							<li>手机号注册需要发短信要收费，没有钱所以选择方便快捷的邮箱注册</li>
							<li>
								注意：<br />
								1. 邮箱注册采取邮箱和用户名双重标识，使用邮箱或者用户名都可以实现登录<br />
								2. 邮箱主要是为了在忘记密码后可以实现找回密码的功能
							</li>
						</ul>
					</div>
					<el-form
						ref="ruleFormRef"
						:model="ruleForm"
						label-width="140px"
						:rules="rules"
						:inline-message="true"
						class="demo-ruleForm"
						status-icon
					>
						<el-form-item prop="email" label="邮箱"> <el-input v-model="ruleForm.email" /> </el-form-item>
						<el-form-item prop="userName" label="用户名">
							<el-input v-model="ruleForm.userName" />
						</el-form-item>
						<el-form-item prop="password" label="密码">
							<el-input show-password v-model="ruleForm.password" />
						</el-form-item>
						<el-form-item prop="affirmPassword" label="确认密码">
							<el-input show-password v-model="ruleForm.affirmPassword" />
						</el-form-item>
						<el-form-item prop="nickName" label="昵称">
							<el-input v-model="ruleForm.nickName" />
						</el-form-item>

						<el-form-item class="email-key" prop="emailKey" label="验证码">
							<el-input v-model="ruleForm.emailKey" />
							<el-button
								type="primary"
								:loading="btnLoading.emailKey"
								:disabled="btnLoading.disable"
								@click="send(ruleFormRef)"
								>{{ btnLoading.disable ? btnLoading.time + "s 后可重试" : "获取验证码" }}</el-button
							> </el-form-item
						><el-form-item prop="gender" label="性别">
							<el-radio-group v-model="ruleForm.gender">
								<el-radio :label="1">男</el-radio>
								<el-radio :label="0">女</el-radio>
								<el-radio :label="2"> 保密</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" class="register" :loading="btnLoading.register" @click="submitForm(ruleFormRef)"
								>注册</el-button
							>
						</el-form-item>
					</el-form>
				</div>
				<div class="sidebar">
					<div class="go-login">已有帐号，<router-link to="/login">直接登录》</router-link></div>
					<div class="help">
						<h2>帮助中心</h2>
						<ul>
							<li><i>1</i><router-link to="">问题1</router-link></li>
							<li><i>2</i><router-link to="">问题2</router-link></li>
							<li><i>3</i><router-link to="">问题3</router-link></li>
						</ul>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import getRules from "../formRules";
import { Register, sendEmail } from "@/api/register";
import { useRouter } from "vue-router";
import { error } from "@/util/ElMessage";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	userName: "",
	password: "",
	affirmPassword: "",
	nickName: "",
	email: "",
	emailKey: "",
	gender: 2
});
const btnLoading = reactive({
	emailKey: false,
	register: false,
	disable: false,
	time: 30
});
const rules = getRules(ruleForm);
const send = async (formEl: FormInstance | undefined) => {
	btnLoading.emailKey = true;

	await formEl?.validateField(["email", "userName"], async valid => {
		if (valid) {
			try {
				await sendEmail(ruleForm.email);
				btnLoading.emailKey = false;
				btnLoading.disable = true;
				await new Promise<void>((resolve, reject) => {
					const timer = setInterval(() => {
						btnLoading.time--;
						if (btnLoading.time == 0) {
							clearInterval(timer);
							btnLoading.time = 30;

							resolve();
						}
					}, 1000);
				});
			} catch {
				error("发送验证码失败");
			} finally {
				btnLoading.emailKey = false;
				btnLoading.disable = false;
			}
		} else {
			btnLoading.emailKey = false;
		}
	});
};
const submitForm = async (formEl: FormInstance | undefined) => {
	btnLoading.register = true;
	await formEl?.validate(async valid => {
		if (valid) {
			try {
				const { affirmPassword, ...obj } = ruleForm;
				await Register(obj);
				router.push("/login");
			} catch {
				error("注册失败");
			} finally {
				btnLoading.register = false;
			}
		} else {
			btnLoading.register = false;
		}
	});
};
</script>
<style scoped lang="scss">
.form-container {
	width: 850px;
	padding-left: 40px;
	border-radius: 6px;
	margin-bottom: 20px;
	background-color: #fff;
	h1 {
		padding: 24px 0 22px 0px;
		font-size: 22px;
		font-weight: normal;
	}
	.form-main {
		display: flex;
		.form {
			.message {
				width: 600px;
				line-height: 20px;
				margin-bottom: 40px;
				li {
					font-size: 12px;
				}
				li:last-of-type {
					color: $red;
				}
			}
		}
		.el-form {
			width: 350px;

			.email-key {
				.el-input {
					width: calc(100% - 105px);
				}
				.el-button {
					width: 100px;
					margin-left: 5px;
				}
			}
		}
		.register {
			width: 100%;
		}
		.sidebar {
			width: 400px;
			height: 200px;
			padding: 0 25px;
			a {
				color: $blue;
			}
			.go-login {
				padding-top: 30px;
				line-height: 40px;
				border-bottom: 1px solid $grey;
			}
			.help {
				h2 {
					font-weight: normal;

					margin: 10px 0;
				}
				li {
					margin: 5px 0;
					i {
						display: inline-block;
						width: 15px;
						height: 18px;
						line-height: 18px;
						text-align: center;
						color: $white;
						margin-right: 10px;
						background-image: url("@/assets/images/bg_listNum.png");
					}
				}
			}
		}
		.sidebar::before {
			content: "";
			display: block;
			position: absolute;
			margin-left: -25px;
			margin-top: 20px;
			width: 1px;
			height: 400px;
			background-color: $grey;
		}
	}
}
.form-container ::v-deep .el-form-item__error--inline {
	position: absolute;
	width: 200px;
	left: 210px;
}
</style>
